<template>
   <span :class="`${classPrefix}--item`">
       <span :class="[`${classPrefix}--inner`,to?`${classPrefix}--isLink`:'']" ref="link">
            <slot></slot>
       </span>
       <bf-icon v-if="separatorClass" :name="separatorClass"></bf-icon>
       <span  v-else :class="`${classPrefix}--separator`">{{separator}}</span>
    </span>
</template>

<script>
import Config from "/src/config";
    export default {
        name:'BreadcrumbItem',
        props:{
            to:{
                type:[String,Object]
            },
            replace:{
                type:Boolean,
                default:false
            }
        },
        data() {
            return {
                classPrefix: Config.classPrefix + "-breadcrumb",
                separator: '',
                separatorClass: ''
            }
        },
        inject:['bfBreadcrumb'],
        mounted(){
            this.separator = this.bfBreadcrumb.separator;
            this.separatorClass = this.bfBreadcrumb.separatorClass
            this.$refs.link.addEventListener('click',()=>{
                const {to,$router} = this;
                if (!to||!$router) return
                this.replace?$router.replace(to):$router.push(to)
            })
        }
    }
</script>